<h2 class="hide">选择用户</h2>
<div id="master-user-pick"
     class="pick-list"
     data-topple="hsList"
     data-load-url="centra/master/user/list.act?ab=_text&amp;with-units=2&amp;bind-scope=0"
     data--0="loadData:($(this).hsFind('%'))"
     data--1="_fill__fork: (hsListFillFork)">
    <form class="findbox toolbox board row" action="" method="POST">
        <div class="col-xs-6">
            <div class="btn-group">
                <button type="button" class="commit btn btn-primary">确认选择</button>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="input-group">
                <input type="search" name="wd" class="form-control input-search"/>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default">查找</button>
                </span>
            </div>
        </div>
    </form>
    <div class="listbox panel panel-default table-responsive">
        <table class="table table-hover table-striped table-compressed">
            <thead>
                <tr>
                    <th data-fn="id[]" data-ft="_fork" class="_check">
                        <input type="checkbox" class="checkall" name="id[]" />
                    </th>
                    <th data-fn="head" class="userhead">头像</th>
                    <th data-fn="name" class="sortable">名称</th>
                    <th data-fn="username" class="sortable">账号</th>
                    <th data-fn="units..name" data-ft="tips">分组</th>
                    <th data-fn="state_text">状态</th>
                    <th data-fn="mtime" data-ft="_htime" data-fill="v*1000" class="_htime sortable">修改时间</th>
                    <th data-fn="ctime" data-ft="_htime" data-fill="v*1000" class="_htime sortable">创建时间</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="pagebox clearfix"><em class="page-text">...</em></div>

    <div class="modal fade in" style="z-index: 99999; display: none;">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">头像</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align:center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    (function($) {
        var context = H$("#master-user-pick");
        var viewImg = context.find(".modal");

        hsRequires("centra/master/util.css");

        // 自适应滚屏
        hsFlexRoll(context.find(".listbox"), $("#main-context"));

        // 鼠标悬浮在格子上提示
        context.data("_fill_tips" , function(c, v, n) {
            if (v) {
                v = v.sort().join(", ");
                    c.attr("title" , v);
            }
            return  v;
        });

        // 点击用户头像打开预览
        viewImg.modal("hide");
        context.data("_fill_head" , function(c, v, n) {
            if (!v) {
                 v = "static/assets/icons/head_icon.jpg";
                $('<a href="javascript:;" data-href="'+v+'">'
                 +'<span class="img" style="background-image:url('+v+');"/></a>')
                .appendTo(c);
            } else {
                $('<a href="javascript:;" data-href="'+v+'">'
                 +'<span class="img" style="background-image:url('+v+');"/></a>')
                .appendTo(c)
                .click( function( ) {
                    var v = $(this).attr("data-href");
                    viewImg.find(".modal-body div").empty()
                           .append('<img src="'+v+'" style="max-width:100%;margin:0px auto;"/>');
                    viewImg.modal("show");
                });
            }
        });
    })(jQuery);
</script>
